<template>
	<view class="friend-video-box bottomBar">
		<scroll-view class="scroll-wp" :scroll-y="true" @scrolltolower="$u.debounce(scrolltolower,300)"
			:lower-threshold="100">
			<view class="scroll-item" v-if="dataList && dataList.length>0">
				<view class="video-item" @click="goToGoodsDetail(list)" v-for="(list,index) in dataList" :key="index">
					<u--image showLoading :src="list.pic" width="100%" height="350rpx" mode="aspectFill"
						:key="index"></u--image>
					<view class="title u-line-1">
						{{list.prodName}}
					</view>
					<view class="goodsPrice">
						￥ {{list.price}} <text class="goods-tag" v-if="list.voucher==1">可用代金券</text>
					</view>

				</view>
			</view>
			<nodata style="min-height:400rpx" v-else
				nodataImgUrl="https://file.casugn.com/storecompcard/temp/空页面@2x(6)_1681114072965.png"
				nodataText="暂无数据"></nodata>
		</scroll-view>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
				dataList: [],
				pageNo: 1,
				total: 0,
				pageSize: 5,
				firstLoad: null,
			}
		},
		computed: {
			...mapGetters(['userInfo']),
		},
		props: ['openId', 'cardId', 'unionId', 'otherUserInfo'],
		methods: {
			getGoodsLists() {
				this.dataList = []
				this.pageNo = 1
				let data = {
					openId: this.openId,
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					status: 1,
				}
				this.$api.getGoodsList(data).then(res => {
					if (res.success && res.result.records) {
						console.log(res.result.records, 'res.result.records');
						this.dataList = res.result.records
						this.total = res.result.total
						this.firstLoad = true
					} else {
						this.dataList = []
						this.total = 0
					}
				})
			},
			goToGoodsDetail(item) {
				uni.navigateTo({
					url: `/pagesMall/mallCenter/mallCenterDetail?id=${item.id}&openId=${item.openId}`
				})
			},
			async scrolltolower() {
				if (this.firstLoad && (this.total === this.dataList.length)) return
				uni.showLoading({})
				this.pageNo++;
				let payload = {
					openId: this.openId,
					pageNo: this.pageNo,
					pageSize: this.pageSize,
				}
				let res = await this.$api.getGoodsList(payload)
				uni.hideLoading()
				if (res.success) {
					this.dataList = this.pageNo === 1 ? res.result.records : this.dataList.concat(res.result.records)
					if ((this.total === this.dataList.length) && this.firstLoad) this.$showToast('已全部加载')
				} else {
					setTimeout(() => {
						this.$showToast(res.message)
					}, 600)
				}
				this.firstLoad = true
			},
			//增加商品点击量
			async addGoodsStatistics(item) {
				//本人访问不统计数据
				if (!this.otherUserInfo.openId) {
					return
				}
				//添加统计数据点击量
				let payload = {
					//被访问人信息
					goodsId: item.goodsId,
					businessCard: this.otherUserInfo.id,
					openId: this.otherUserInfo.openId,
					goodsPrice: item.goodsPrice,
					goodsName: item.goodsName,
					goodsImage: item.goodsImage,
					//访问人信息
					friendId: this.userInfo.id,
					name: this.userInfo.name,
					unionid: this.userInfo.unionId,
					status: 0,
					isDel: 0
				}
				let res = await this.$api.addShoppingStatistics(payload)
				if (res.success) {
					console.log(res.result);
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none'
					});
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.friend-video-box {
		.scroll-wp {
			width: 100%;
			height: calc(100vh - 400rpx);
			padding: 0 20rpx;
			box-sizing: border-box;

			.scroll-item {
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				justify-content: space-between;
			}

			.video-item {
				width: 48%;
				margin-top: 5rpx;

				.title {
					height: 50rpx;
					line-height: 50rpx;
					font-size: 24rpx;
				}

				.goodsPrice {
					display: flex;
					align-items: center;
					height: 50rpx;
					line-height: 50rpx;
					font-size: 24rpx;
					color: red;

					.goods-tag {
						border-radius: 6rpx;
						border: 1rpx solid #FF7D00;
						padding: 4rpx 10rpx;
						margin-left: 20rpx;
						text-align: center;
						width: 100rpx;
						height: 28rpx;
						font-size: 20rpx;
						font-weight: 400;
						color: #FF7D00;
						line-height: 28rpx;

					}
				}

			}

		}
	}
</style>